<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 白色内容区域 -->
        <div class="page_content">
            <!-- 1 -->
            <div style="width:200px">
                        <el-input
                            v-model="searchParams.query"
                            placeholder="搜索关键字"
                            class="input-with-select"
                        >
                                <template #append>
                                <el-button @click="searchList"><el-icon><Search /></el-icon></el-button>
                                </template>
                        </el-input>
            </div>
        
            <!-- 2表格 -->
            <el-table :data="goodsList" style="width: 100%">
                        <el-table-column prop="goods_name" label="商品名" width="180" />
                        <el-table-column prop="goods_price" label="价格(￥)" width="180" />
                        <el-table-column prop="goods_weight" label="商品重量(kg)" />
                        <el-table-column prop="goods_state" label="商品状态">
                            <template #default="scope">
                                <p>{{ switchState(scope.row.goods_state) }}</p>
                            </template>
                        </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { toRefs, reactive } from "vue";
import { goodsListApi} from "@/util/request.js";
export default {
  name: "goods",
  setup() {
    const data = reactive({
      keyWord: "",
      searchParams: {
        query: "",//模糊搜索
        pagesize: 10,
        pagenum: 1,//初始化
      },
      total: 0,
      goodsList: [],
    })    
    const searchList = () => {
      //只是定义了这个函数，这里没有调用 goodsListApi(data.searchParams) 
          goodsListApi(data.searchParams).then((res) => {
                if (res.data) {
                      data.goodsList = res.data.goods;
                      data.total = res.data.total;
                      //双向绑定，列表渲染
                }
          });
    }

    const switchState=(state)=>{
      //只是定义了这个函数，这里没有调用，触发点击事件时调用，调用时需要传参
      //定义时没有形参，那调用时也不需要传参
      //定义时传入n个参数，那调用时也需要传入n个参数
        switch (state) {
            case 0:
                return "未通过"
                break;
            case 1:
                return "审核中"
                break;
            case 2:
                return "已审核"
                break;
        }
    }
    searchList();//输入goods路由，调用这个函数，内含Api请求
    //调用Api时，传入参数（body），同时传入token（request header）
    //token是在创建axios实例时放在Api请求的header
    return {
      ...toRefs(data),
      searchList,
      switchState,
    }
  },
}
</script>